<template>
  <!-- 批量导入对话框 -->
  <upload-container
    v-if="visibleOpen"
    v-model="fileRaw"
    :title="props.title"
    :accept="props.accept"
    :max-size="props.maxSize"
    :type="props.type"
    :selected-id="props.selectedId"
    @close-drawer="closeDrawer"
    @finish="finish"
  ></upload-container>
</template>

<script setup lang="ts">
  import { ref, defineProps, onMounted, defineEmits, watch } from 'vue';
  import uploadContainer from './upload-container.vue';

  const emit = defineEmits([
    'closeDrawer',
    'finish',
    'update:modelValue',
    'restion',
  ]);
  const props = defineProps({
    modelValue: {
      type: Object,
      default: null,
    },
    btnType: {
      type: String,
      default: 'primary',
    },
    btnName: {
      type: String,
      default: '上传文件',
    },
    title: {
      type: String,
      default: '',
    },
    accept: {
      type: String,
      default: '.xlsx, .xls, .txt',
      required: false,
    },
    maxSize: {
      type: Number,
      default: 5,
    },
    type: {
      type: String,
    },
    selectedId: {
      type: Array,
    },
  });
  const fileRaw = ref({});
  const visibleOpen = ref(true);

  const closeDrawer = () => {
    visibleOpen.value = false;
    emit('closeDrawer');
    emit('restion', visibleOpen.value);
  };
  // 完成
  const finish = (response: any) => {
    visibleOpen.value = false;
    emit('finish', response);
    emit('restion', visibleOpen.value);
  };
  watch(
    fileRaw,
    () => {
      emit('update:modelValue', fileRaw.value);
    },
    {
      deep: true,
    }
  );
  onMounted(() => {
    console.log('1111');
  });
</script>

<style lang="less" scoped>
  .arco-btn-text {
    height: unset !important;
    padding: 0 !important;
  }
</style>
